<template>
  <div class="confirmWrap">
    <div slot="footer" class="dialog-footer clearfix">
      <div style="float: left; line-height: 32px;padding-left: 12px;">
        预约登记
        <span style='color: #999;font-size:12px;'>
          新增（适合门诊就诊的病人到日间服务中心预约
        </span>
      </div>
      <div style="float: right;">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('dialogLeftTop1_1_data')">确 定</el-button>
      </div>
    </div>
    <div class="box scrollWrap" ref= 'appMain'>
      <el-form :model="dialogLeftTop1_1_data" ref='dialogLeftTop1_1_data' :show-message=true
               :rules="appointmentConfirmConst.dialogLeftTop1_1_data_rules" :inline="true">
        <h3 class='h3title'>
          <span>就诊信息</span>
          <p class='applicant'>
            <span>申请人：</span> <b>{{APPLICANT_NAME}}</b>
          </p>
        </h3>
        <treatment-info
          :dialogLeftTop1_1_data='dialogLeftTop1_1_data'
          ref = 'treatmentInfo'>
        </treatment-info>
        <h3>
          <span class='h3title'>麻醉信息</span>
        </h3>
        <el-form-item label="拟行麻醉" :label-width="formLabelWidth" prop="anesthetistType">
          <!--<el-select v-model="dialogLeftTop1_1_data.anesthetistType" placeholder="请选择麻醉" style = 'width: 196px'>
            <el-option v-for= 'item in dialogLeftTop1_1_data_anesthesiaList' :label="item.label" :value="item.value" :key='item.value'></el-option>
          </el-select>-->
          <dict-select v-model="dialogLeftTop1_1_data.anesthetistType" placeholder="请选择麻醉" style='width: 196px'
                       dict-code="mzlb"></dict-select>
        </el-form-item>
        <el-form-item label="ASA评级" :label-width="formLabelWidth" prop="asaLevel">
          <dict-select v-model="dialogLeftTop1_1_data.asaLevel" placeholder="请选择麻醉" style='width: 196px'
                       dict-code="asapj"></dict-select>
        </el-form-item>
        <h3>
          <span class='h3title'>拟手术信息</span>
        </h3>
        <el-form-item label="主刀医生" :label-width="formLabelWidth" prop="doctorId">
          <el-select v-model.number="dialogLeftTop1_1_data.doctorId" placeholder="请选择医生" style='width: 196px'
                     filterable remote reserve-keyword :remote-method="getDoctor" :loading="loading"
                     @change="getOperation(' ');dialogLeftTop1_1_data.operationNo='';dialogLeftTop1_1_data2.operationNo='';dialogLeftTop1_1_data3.operationNo=''">
            <el-option v-for='item in dialogLeftTop1_1_data_operateDoctorList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="doctorTel">
          <el-input v-model="dialogLeftTop1_1_data.doctorTel" auto-complete="off" placeholder="请输入联系电话"
                    style='width: 196px'></el-input>
        </el-form-item>
        <el-form-item label="拟行手术" :label-width="formLabelWidth" prop="operationNo">
          <el-select v-model="dialogLeftTop1_1_data.operationNo" placeholder="请选择执行手术" style='width: 196px'
                     filterable remote reserve-keyword :remote-method="getOperation" :loading="loading">
            <el-option v-for='item in dialogLeftTop1_1_data_operateSurgeryList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="侧别" :label-width="formLabelWidth" prop="operationSide">
          <dict-select v-model="dialogLeftTop1_1_data.operationSide" placeholder="请选择" style='width: 196px'
                       dict-code="cb"></dict-select>
        </el-form-item>
        <el-form-item label="体位" :label-width="formLabelWidth" prop="operationPosition">
          <dict-select v-model="dialogLeftTop1_1_data.operationPosition" placeholder="请选择" style='width: 196px'
                       dict-code="tw"></dict-select>
        </el-form-item>
        <el-form-item label="术前诊断" :label-width="formLabelWidth" prop="beforeDiagnosis">
          <el-input type='textarea' v-model='dialogLeftTop1_1_data.beforeDiagnosis' style='width: 196px;'></el-input>
        </el-form-item>
        <el-form-item label="切口等级" :label-width="formLabelWidth" prop="incisionLevel">
          <dict-select v-model="dialogLeftTop1_1_data.incisionLevel" placeholder="请选择" style='width: 196px'
                       dict-code="qkdj"></dict-select>
        </el-form-item>
        <el-form-item label="特殊感染" :label-width="formLabelWidth" prop="specialInfected">
          <dict-select v-model="dialogLeftTop1_1_data.specialInfected" placeholder="请选择" style='width: 196px'
                       dict-code="tsgr"></dict-select>
        </el-form-item>
        <el-form-item label="特殊要求" :label-width="formLabelWidth" prop="specialRequirement">
          <el-input v-model="dialogLeftTop1_1_data.specialRequirement" auto-complete="off"
                    placeholder="请输入特殊要求" style='width: 196px'></el-input>
        </el-form-item>
        <el-form-item label="部位" :label-width="formLabelWidth">
          <dict-select v-model="dialogLeftTop1_1_data.bodyPosition" multiple placeholder="请选择" style='width: 196px'
                       dict-code="bw"></dict-select>
        </el-form-item>
        <el-form-item label="备血" :label-width="formLabelWidth" prop="preparedBlood">
          <el-input v-model="dialogLeftTop1_1_data.preparedBlood" auto-complete="off" placeholder="请输入备血"
                    style='width: 196px'></el-input>
        </el-form-item>
        <el-form-item label="指导医生" :label-width="formLabelWidth" prop="guideDoctorName">
          <el-select v-model="dialogLeftTop1_1_data.guideDoctorId" placeholder="请选择指导医生" style='width: 196px'
                     filterable remote reserve-keyword :remote-method="getDoctor" :loading="loading">
            <el-option v-for='item in dialogLeftTop1_1_data_operateDoctorList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手术助理" :label-width="formLabelWidth" prop="asstDoctorIds">
          <el-select v-model="dialogLeftTop1_1_data.asstDoctorIds" multiple placeholder="请选择" style='width: 196px'
                     filterable remote reserve-keyword :remote-method="getDoctor" :loading="loading">
            <el-option v-for='item in dialogLeftTop1_1_data_operateDoctorList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="常服抗凝药" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="dialogLeftTop1_1_data.isNormalDrug">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">有</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="种类" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="dialogLeftTop1_1_data.normalDrugType">
              <el-radio :label="0">阿司匹林</el-radio>
              <el-radio :label="1">波立维</el-radio>
              <el-radio :label="2">其他</el-radio>
              <el-input v-model='anticoagulantTypeOther' v-if='dialogLeftTop1_1_data.normalDrugType == "2"'
                        style='display: inline-block; width:200px;'></el-input>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="需术前停药" :label-width="formLabelWidth" prop="stopDays">
          <el-input v-model="dialogLeftTop1_1_data.stopDays" auto-complete="off" placeholder="天数"
                    style='width: 196px'></el-input>
        </el-form-item>
        <el-form-item label="肝炎相关抗原" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="dialogLeftTop1_1_data.hepatitisAntigenType">
              <el-radio :label="0">阴性</el-radio>
              <el-radio :label="1">阳性</el-radio>
              <el-radio :label="2">未报告</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="植入物" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="dialogLeftTop1_1_data.implantType">
              <el-radio :label="1">异物植入物</el-radio>
              <el-radio :label="2">人工植入物</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="术前其他诊断" :label-width="formLabelWidth" prop="otherDiagnosis">
          <dict-select v-model="dialogLeftTop1_1_data.otherDiagnosis" multiple placeholder="请选择" style='width: 196px' dict-code="sqqtzd">
          </dict-select>
        </el-form-item>
        <h3>
          <span class='h3title'>拟手术信息2</span>
        </h3>
        <el-form-item label="拟行手术" :label-width="formLabelWidth" prop="operationName2">
          <el-select v-model="dialogLeftTop1_1_data2.operationNo" auto-complete="off" placeholder="请输入拟行手术"
                     style='width: 196px' filterable remote reserve-keyword :remote-method="getOperation"
                     :loading="loading">
            <el-option v-for='item in dialogLeftTop1_1_data_operateSurgeryList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="侧别" :label-width="formLabelWidth" prop="operationSide2">
          <dict-select v-model="dialogLeftTop1_1_data2.operationSide" placeholder="请选择" style='width: 196px'
                       dict-code="cb">
          </dict-select>
        </el-form-item>
        <el-form-item label="切口等级" :label-width="formLabelWidth" prop="incisionLevel2">
          <dict-select v-model="dialogLeftTop1_1_data2.incisionLevel" placeholder="请选择" style='width: 196px'
                       dict-code="qkdj">
          </dict-select>
        </el-form-item>
        <h3>
          <span class='h3title'>拟手术信息3</span>
        </h3>
        <el-form-item label="拟行手术" :label-width="formLabelWidth" prop="operationName3">
          <el-select v-model="dialogLeftTop1_1_data3.operationNo" auto-complete="off" placeholder="请输入拟行手术"
                     style='width: 196px' filterable remote reserve-keyword :remote-method="getOperation"
                     :loading="loading">
            <el-option v-for='item in dialogLeftTop1_1_data_operateSurgeryList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="侧别" :label-width="formLabelWidth" prop="operationSide3">
          <dict-select v-model="dialogLeftTop1_1_data3.operationSide" placeholder="请选择" style='width: 196px'
                       dict-code="cb">
            <el-option v-for='item in dialogLeftTop1_1_data_guideDoctorList' :label="item.name" :value="item.id"
                       :key='item.id'></el-option>
          </dict-select>
        </el-form-item>
        <el-form-item label="切口等级" :label-width="formLabelWidth" prop="incisionLevel3">
          <dict-select v-model="dialogLeftTop1_1_data3.incisionLevel" placeholder="请选择" style='width: 196px'
                       dict-code="qkdj">
          </dict-select>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
  import _ from 'lodash'
  import treatmentInfo from '@/yimiviews/components/treatmentInfo'
  import dictSelect from '@/views/form/dictSelect'
  import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import { dictionary } from '@/api/knowledgeManage/dictionary'
  import { create, read } from '@/api/appointmentManage/appointmentConfirm'
  import { getDoctorList, getOperationList } from '@/api/common/common'

  export default {
    components: { treatmentInfo, dictSelect },
    data() {
      return {
        formLabelWidth: '120px',
        appointmentConfirmConst,
        dictSelect,
        loading: false,
        dialogLeftTop1_1_data: {
          id: '',
          appointNo: '',
          operationNo: '',
          operationName: '',
          doctorName: '',
          doctorId: '',
          doctorTel: '',
          guideDoctorName: '',
          guideDoctorId: '',
          asstDoctorIds: '',
          operationSide: '',
          operationPosition: '',
          bodyPosition: '',
          incisionRecord: '',
          incisionLevel: '',
          preparedBlood: '',
          specialInfected: '',
          specialRequirement: '',
          isNormalDrug: 0,
          normalDrugType: 0,
          otherDrug: '',
          stopDays: '',
          hepatitisAntigenType: '',
          implantType: '',
          beforeDiagnosis: '',
          otherDiagnosis: '',
          anesthetistType: '',
          asaLevel: '',
          anesthetistName: '',
          anesthetistId: '',
          anesthetistTel: '',
          schedule: '',
          scheduleAmpm: '',
          wardId: '',
          wardName: '',
          wardBedNo: '',
          isDeleted: '',
          createId: '',
          createTime: '',
          updateId: '',
          updateTime: '',
          isMainInfo: 1,
          medicare: '',
          patientName: '',
          phone: '',
          idCard: '',
          sex: '',
          age: '',
          visitDate: '',
          visitDepartment: '',
          visitDoctor: '',
          diagnosis: '',
          patientId: 1
        },
        dialogLeftTop1_1_data2: {
          operationName: '',
          operationSide: '',
          incisionLevel: ''
        },
        dialogLeftTop1_1_data3: {
          operationName: '',
          operationSide: '',
          incisionLevel: ''
        },
        anticoagulantTypeOther: '',
        dialogLeftTop1_1_data_departmentList: [],
        dialogLeftTop1_1_data_doctorList: [],
        dialogLeftTop1_1_data_operateSurgeryList: [],
        dialogLeftTop1_1_data_sideDifferenceList: [],
        dialogLeftTop1_1_data_positionList: [],
        dialogLeftTop1_1_data_anesthesiaList: [],
        dialogLeftTop1_1_data_ASALevelList: [],
        dialogLeftTop1_1_data_operateDoctorList: [],
        dialogLeftTop1_1_data_incisionLevelList: [],
        dialogLeftTop1_1_data_infectionList: [],
        dialogLeftTop1_1_data_guideDoctorList: [],
        dialogLeftTop1_1_data_assistantList: []
      }
    },
    mounted() {
      this.getDoctor(' ')
      // this.getOperation(' ')
      this.setAppMainHeight()
      // 重新预约
      if (this.$route.query.id) {
        read(this.$route.query.id).then(res => {
          const resData = res.data.data
          if (resData) {
            if (resData.operationRels.length > 0) {
              const mainRel = resData.operationRels[0]
              if (mainRel.visitDepartment && mainRel.visitDepartment !== '') {
                mainRel.visitDepartment = parseInt(mainRel.visitDepartment)
              }
              if (mainRel.visitDoctor && mainRel.visitDoctor !== '') {
                mainRel.visitDoctor = parseInt(mainRel.visitDoctor)
              }
              if (mainRel.operationNo && mainRel.operationNo !== '') {
                mainRel.operationNo = parseInt(mainRel.operationNo)
              }
              if (mainRel.specialInfected && mainRel.specialInfected !== '') {
                mainRel.specialInfected = parseInt(mainRel.specialInfected)
              }
              mainRel.asstDoctorIds = _(mainRel.asstDoctorIds.split(',')).map(x => parseInt(x)).value()
              mainRel.bodyPosition = _(mainRel.bodyPosition.split(',')).map(x => parseInt(x)).value()
              mainRel.otherDiagnosis = _(mainRel.otherDiagnosis.split(',')).map(x => parseInt(x)).value()
              this.dialogLeftTop1_1_data = mainRel
            }
            if (resData.operationRels.length > 1) {
              const rel2 = resData.operationRels[1]
              if (rel2.operationNo && rel2.operationNo !== '') {
                rel2.operationNo = parseInt(rel2.operationNo)
              }
              this.dialogLeftTop1_1_data2 = rel2
            }
            if (resData.operationRels.length > 2) {
              const rel3 = resData.operationRels[2]
              if (rel3.operationNo && rel3.operationNo !== '') {
                rel3.operationNo = parseInt(rel3.operationNo)
              }
              this.dialogLeftTop1_1_data3 = rel3
            }
            this.getOperation(' ')
          }
        })
      }
    },
    methods: {
      cancel() {
        this.$root.closeTag()
      },
      getDictList(type) {
        return dictionary({ type: type })
      },
      submitForm(formName) {
        const treatmentValid = this.$refs.treatmentInfo.submit()
        this.$refs[formName].validate((valid) => {
          if (valid && treatmentValid) {
            const postdata = {
              patientId: this.dialogLeftTop1_1_data.patientId,
              source: 0,
              operationRels: [JSON.parse(JSON.stringify(this.dialogLeftTop1_1_data)), this.dialogLeftTop1_1_data2, this.dialogLeftTop1_1_data3]
            }
            postdata.operationRels[0].asstDoctorIds = this.dialogLeftTop1_1_data.asstDoctorIds.join(',')
            postdata.operationRels[0].bodyPosition = this.dialogLeftTop1_1_data.bodyPosition.join(',')
            postdata.operationRels[0].otherDiagnosis = this.dialogLeftTop1_1_data.otherDiagnosis.join(',')
            create(postdata).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: '恭喜你，预约成功！',
                  type: 'success',
                  duration: 2000
                })
                this.$root.closeTag()
              } else {
                this.$message({
                  message: `抱歉，${res.data.msg}！`,
                  type: 'error',
                  duration: 2000
                })
              }
            })
            // this.$refs[formName].resetFields()
            this.dialogLeftTop1_1 = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getDoctor(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            getDoctorList({ keyword: query.toLowerCase(), type: 1 }).then((res) => {
              this.loading = false
              this.dialogLeftTop1_1_data_operateDoctorList = res.data.list
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_operateDoctorList = []
        }
      },
      getOperation(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            getOperationList({ keyword: query.toLowerCase(), doctorId: this.dialogLeftTop1_1_data.doctorId }).then((res) => {
              this.loading = false
              this.dialogLeftTop1_1_data_operateSurgeryList = res.data.list
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_operateSurgeryList = []
        }
      },
      setAppMainHeight() {
        const bodyHeight = document.body.offsetHeight
        const appMainHeight = bodyHeight - 180
        this.$refs.appMain.style.height = appMainHeight + 'px'
      }
    },
    computed: {
      APPLICANT_NAME() {
        this.dialogLeftTop1_1_data.applicant = this.$store.getters.name
        return this.$store.getters.name
      }
    },
    watch: {
      'dialogLeftTop1_1_data.doctorId': function() {
        try {
          this.dialogLeftTop1_1_data.doctorName = this.dialogLeftTop1_1_data.doctorId !== ''
            ? _.find(this.dialogLeftTop1_1_data_operateDoctorList, { id: this.dialogLeftTop1_1_data.doctorId }).name : ''
        } catch (e) {
          console.log(e)
        }
      },
      'dialogLeftTop1_1_data.guideDoctorId': function() {
        try {
          this.dialogLeftTop1_1_data.guideDoctorName = this.dialogLeftTop1_1_data.guideDoctorId !== ''
            ? _.find(this.dialogLeftTop1_1_data_operateDoctorList, { id: this.dialogLeftTop1_1_data.guideDoctorId }).name : ''
        } catch (e) {
          console.log(e)
        }
      },
      'dialogLeftTop1_1_data.operationNo': function() {
        try {
          this.dialogLeftTop1_1_data.operationName = this.dialogLeftTop1_1_data.operationNo !== ''
            ? _.find(this.dialogLeftTop1_1_data_operateSurgeryList, { id: this.dialogLeftTop1_1_data.operationNo }).name : ''
        } catch (e) {
          console.log(e)
        }
      },
      'dialogLeftTop1_2_data.operationNo': function() {
        try {
          this.dialogLeftTop1_1_data2.operationName = this.dialogLeftTop1_1_data2.operationNo !== ''
            ? _.find(this.dialogLeftTop1_1_data_operateSurgeryList, { id: this.dialogLeftTop1_1_data2.operationNo }).name : ''
        } catch (e) {
          console.log(e)
        }
      },
      'dialogLeftTop1_3_data.operationNo': function() {
        try {
          this.dialogLeftTop1_1_data3.operationName = this.dialogLeftTop1_1_data3.guideDoctorId !== ''
            ? _.find(this.dialogLeftTop1_1_data_operateSurgeryList, { id: this.dialogLeftTop1_1_data3.operationNo }).name : ''
        } catch (e) {
          console.log(e)
        }
      }
    }
  }
</script>
<style lang="scss">
  .confirmWrap {
    background-color: #f0f2f5;
    padding: 0 20px 20px;
    .dialog-footer {
      padding: 10px;
      background-color: #fff;
      margin: 0 -20px 20px;
    }
    .box {
      background-color: #fff;
      padding: 20px;
    }
    .scrollWrap{
      min-height: 100%;
      overflow: auto;
    }
    h3 {
      padding: 0;
      font-weight: normal;
      & > span {
        display: inline-block;
        width: 120px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background: #eee;
      }
      &.h3title {
        border-bottom: 1px solid #eee;
        .applicant {
          padding: 0;
          margin: 0;
          float: right;
          height: 36px;
          line-height: 36px;
          font-size: 16px;
          span {
            color: #bbb;
          }
        }
      }
    }
  }
</style>

